<template>
  <div class="c-content">
    <!-- 查询 -->
    <slot name="title" />
    <slot name="search" />
    <!-- 表格 -->
    <slot name="table" />
    <!-- 分页器 v-show="total>0" -->
    <div v-if="pagination">
      <el-pagination
        background
        style="text-align: center;margin-top: 25px;"
        :total="total"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="pageSizes"
        layout="prev, pager, next,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        <span class="search-btn" @click="handleCurrentChange(currentPage)">确定</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pagination: {
      type: Boolean,
      default: true
    },
    page: {
      type: Number,
      default: 1
    },
    pagesize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 1
    },
    pageSizes: {
      type: Array,
      default() {
        return [1, 10, 20, 50, 100, 200, 500, 1000]
      }
    }
  },
  computed: {
    /* 切换页码 */ 
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    /* 切换条数 */ 
    pageSize: {
      get() {
        return this.pagesize
      },
      set(val) {
        this.$emit('update:pagesize', val)
      }
    }
  },
  methods: {
    /* 条数改变触发 */ 
    handleSizeChange(val) {
      this.$emit('pagination', { type: 'sizes', val })
    },
    /* 页码改变触发 */ 
    handleCurrentChange(val) {
      this.$emit('pagination', { type: 'index', val })
    },
    searchClick() {
      this.$emit('pagination', { type: 'index', val })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-content.table-scroll {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-table {
    flex: 1;
    overflow: auto;
  }
}
</style>

